<template>
  <div class="hello">
    <h3>当前求和为：{{sum}}</h3>
    <!-- <h4>当前求和放大10倍为：{{$store.getters.bigSum}}</h4> -->
    <h4>当前求和放大10倍为：{{bigSum}}</h4>
    <h4>我在{{address}}学习</h4>
    <select v-model.number="value">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <button @click="increment(value)">+</button>
    <button @click="JIA(value)">+</button>
    <button @click="decrement(value)">-</button>
    <button @click="incrementOdd(value)">奇数+</button>
    <button @click="jiaOdd(value)">奇数+</button>
    <button @click="incrementWait">等会+</button>
  </div>
</template>

<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
  name: 'HelloWorld',
  data(){
    return {
      value:1
    }
  },
  methods:{
    increment(){
      // this.$store.dispatch('jia',this.value)
      this.$store.commit('countAbout/JIA',this.value)
    },
    // decrement(){
    //   // this.$store.dispatch('jian',this.value)
    //   this.$store.commit('JIAN',this.value)
    // },

    //借助mapMutations生成对应的方法，回去调用commite去联系mapMutations
    // ...mapMutations({increment:'JIA',decrement:'JIAN'}),

    ...mapMutations('countAbout',['JIA','JIAN']),

    /***********************************/
    // incrementOdd(){
    //   // if(this.$store.state.sum % 2){
    //     this.$store.dispatch('jiaOdd',this.value)
    //   // }
    // },
    incrementWait(){
      setTimeout(()=>{
        this.$store.dispatch('jia',this.value)
      },500)
    },

    ...mapActions('countAbout',{incrementOdd:'jiaOdd'}),
    ...mapActions('countAbout',['jiaOdd'])
  },
  computed:{
    //借助mapstate生成计算属性（对象写法）
    // ...mapState({address:'address'}) 
    //借助mapstate生成计算属性（数组写法）
    // ...mapState(['address']) ,
    ...mapGetters('countAbout',['bigSum']),

    ...mapState('countAbout',['address','sum'])
  }
}
</script>

<style scoped>
</style>
